<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>全球播院线运营分析</title>
	
	<meta name="viewport" content="width=1024, user-scalable=no">
	
	<!-- Core and extension CSS files -->
	<link rel="stylesheet" href="slides/css/deck.core.css">
	<link rel="stylesheet" href="slides/css/deck.status.css">
	<link rel="stylesheet" href="slides/css/deck.scale.css">
	
	<!-- Style theme. More available in /themes/style/ or create your own. -->
	<link rel="stylesheet" href="slides/css/web-2.0.css">
	
	<!-- Transition theme. More available in /themes/transition/ or create your own. -->
	<link rel="stylesheet" href="slides/css/horizontal-slide.css">
	<link rel="stylesheet" href="slides/css/md_hl.css">
        <link href="slides/css/bootstrap.min.css" rel="stylesheet">
	
	<script src="slides/js/modernizr.custom.js"></script>
        <script src="slides/js/bootstrap.min.js"></script>
        <script src="slides/js/echarts.min.js"></script>
</head>

<body class="deck-container">

<!-- Begin slides -->
<!-- Begin slides -->
<section class="slide "><div class="content"><h1>KPI</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>公元2016年</th>
<th align="center">2016-02-20 12:00</th>
<th align="right">完成进度</th>
</tr>
</thead>
<tbody>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
</tbody>
</table>
</div>
<div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var base = +new Date(2015, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 150];

for (var i = 1; i < 100; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
    data.push((Math.random() - 0.4) * 20 + data[i - 1]);
}

option = {
    title: {
        x: 'center',
        text: '某楼盘销售情况',
    },
    legend: {
        top: 'bottom',
        data:['意向']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: false, readOnly: false},
            magicType: {show: false, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: false},
            saveAsImage: {show: false}
        }
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: date
        }
    ],
    yAxis: [
        {
            type: 'value',
            max: 500
        }
    ],
    dataZoom: {
        type: 'inside',
        start: 60,
        end: 80
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};
         // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</section>
<section class="slide "><div class="content"><h1>Another slide</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>公元2016年</th>
<th align="center">2016-02-20 12:00</th>
<th align="right">完成进度</th>
</tr>
</thead>
<tbody>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
<tr>
<td>票房 8000万</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>现金 2000万</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>新增用户 1500万</td>
<td align="center">are neat</td>
<td align="right">$    1</td>
</tr>
</tbody>
</table>
</div></section>
<section class="slide left"><div class="content"><h1>left</h1></div></section>

<!-- deck.status snippet -->
<p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p>

<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="slides/js/jquery-1.7.2.min.js"></script>

<!-- Deck Core and extensions -->
<script src="slides/js/deck.core.js"></script>
<script src="slides/js/deck.status.js"></script>
<script src="slides/js/deck.scale.js"></script>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide');
});
</script>

</body>
</html>
